<template>
  <div class="dashboard-editor-container">
    <div class="chart-wrapper1">
      <el-row  :gutter="10">
      <el-col :span="8" >
         队列渠道对象：
        <el-radio v-model="radio1" label="1" style="color:#2ca7e9" >视频</el-radio>
        <el-radio v-model="radio1" label="2" style="color:#2ca7e9" >电话</el-radio>
        <el-radio v-model="radio1" label="3" style="color:#2ca7e9" >文字</el-radio>
      </el-col>
    </el-row>
    <el-row :gutter="10" style="margin-top: 10px;padding-right: 20px;margin-bottom: 20px;">
      <el-col :span="7" >
         组织范围：
         <!-- <el-radio-group v-model="radio" style="margin-top: 10px;" size="mini" border> -->
          <!-- <el-radio-button label="洛阳" border></el-radio-button>
          <el-radio-button label="OTA业务" border></el-radio-button> -->
          <el-button v-if="this.radio1=='1'"  size="mini"  plain style="color:#2ca7e9">陈晓明</el-button>  
          <el-button  size="mini"  plain style="color:#2ca7e9">洛阳</el-button>                        
          <el-button  plain size="mini"  style="color:#2ca7e9">OTA业务</el-button>
        <!-- </el-radio-group> -->
      </el-col>
      <el-col :span="5">
           <el-button  size="mini"  plain style="color:#2ca7e9">重置</el-button>                        
            <el-button  plain size="mini"  style="color:#2ca7e9">确定</el-button>
      </el-col>
    </el-row> 
    <el-form size="mini"  label-position="left" :inline="true" >
      <el-form-item >
        <el-col :span="8" >
          <select-tree    :single-check="true" v-model="branchId" showText="行政" style="width:170px;" :props='{id:"orgno",label: "cname",children: "children"}' :tree-data="brnoList"  placeholder="请选择机构"></select-tree>
        </el-col>
      </el-form-item>
      <el-form-item >
        <el-col :span="8">
          <select-tree   :single-check="true" v-model="branchId"  showText="地区" style="width:170px;" :props='{id:"orgno",label: "cname",children: "children"}' :tree-data="brnoList1"  placeholder="请选择机构"></select-tree>
        </el-col>
      </el-form-item>
      <el-form-item  >
        <el-col :span="8">
        <select-tree  :single-check="true" v-model="branchId"  showText="业务"  style="width:170px;" :props='{id:"orgno",label: "cname",children: "children"}' :tree-data="brnoList2"  placeholder="请选择机构"></select-tree>
        </el-col>
      </el-form-item>
      </el-form>
    </div>
    <el-row class="main" v-if="this.radio1=='1'">
    <el-col :span="11" class="left-col" >
      <el-card>
        <div slot="header" class="clearfix">
          <el-button style="float: left; padding: 3px 0" type="text" @click="this.evaluatingShow">六维评测✄</el-button>
          <el-button style="float: left; padding: 3px 0" type="text" @click="queryCallsix1">查询六维评测</el-button>
          <el-button style="float: right; padding: 3px 0" type="text" @click="this.detailShow">详情>></el-button>
        </div>
        <div>
         <el-form  :model="form1" size="mini" label-position="left" ref="form">
          <el-col :span="8">
            <el-form-item  prop='company'>
              <el-select v-model="form1.company" placeholder="请选择公司" @change="queryTeam">
                <el-option v-for="item in companyList" 
                :key="item.TEAMID"
                :label="(item.TEAMID+'-'+item.TEAMNAME)"
                :value="item.TEAMID">
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
           <el-col :span="8">
            <el-form-item  prop="group">
              <el-select v-model="form1.group" filterable placeholder="请选择班组">
                <el-option
                  v-for="item in teamList"
                  :key="item.TEAMID"
                  :label="(item.TEAMID+'-'+item.TEAMNAME)"
                  :value="item.TEAMID"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
         </el-form>
        </div>
        <div :style="{float:'left',width:'100%'}"> 
          <!-- <div class="myHexagon" ref="myHexagon"></div> -->
          <ve-radar :data="radarData" :settings="radarSettings" :extend="radarExtend" :data-empty="radarEmpty"></ve-radar>

        </div>
        <!-- <div >
          <raddar-chart/>
        </div> -->
      </el-card>
    </el-col>
    <el-col :span="12" :offset="1" class="right-col">
      <el-card>
        <div slot="header" class="clearfix">
         <el-button style="float: left; padding: 3px 0" type="text" @click="this.showTendencyMap">趋势</el-button>
         <el-button style="float: right; padding: 3px 0" type="text" @click="this.detailShow">详情>></el-button>
        </div>
        <div style="float: right;" >
        <div style="float: right;"><span class="class1"></span>实际值</div> 
         <!-- <div style="float: right;"><span class="class2"></span>目标值</div> -->
        
        </div>
        <div class="linstyel">
          <el-row class="main1">
            <el-col :span="8"  >
              <ve-line   :data="lineData1" width="100%" height="235px" :extend="lineExtend1" :settings="lineSetting1" :legend-visible="false"  ></ve-line>
            </el-col>
            <el-col :span="8"  >
              <ve-line   :data="lineData2" width="100%" height="235px" :extend="lineExtend2" :legend-visible="false"  ></ve-line>
            </el-col>
            <el-col :span="8"  >
              <ve-line   :data="lineData3" width="100%" height="235px" :extend="lineExtend3" :legend-visible="false"  ></ve-line>
            </el-col>
            <el-col :span="8"  >
              <ve-line   :data="lineData4" width="100%" height="235px" :extend="lineExtend4" :legend-visible="false"  ></ve-line>
            </el-col>
            <el-col :span="8"  >
              <ve-line   :data="lineData5" width="100%" height="235px" :extend="lineExtend5" :legend-visible="false"  ></ve-line>
            </el-col>
            <el-col :span="8"  >
              <ve-line   :data="lineData6" width="100%" height="235px" :extend="lineExtend6" :legend-visible="false"  ></ve-line>
            </el-col>

            <!-- <el-col :span="8">
              <div class="myChart"  ref="myChart2"></div>
            </el-col>
            <el-col :span="8">
              <div class="myChart"  ref="myChart6"></div>
            </el-col> -->
          </el-row>
        </div>
      </el-card>
    </el-col>
  </el-row>
  <el-row class="main" v-if="this.radio1=='1'">
    <el-col :span="11" class="left-col">
      <el-card>
        <div slot="header" class="clearfix">
          <el-button style="float: left; padding: 3px 0" type="text" @click="this.showAgentMap">实时坐席状态✄</el-button>
          <el-button style="float: right; padding: 3px 0" type="text" @click="this.agentShow">详情>></el-button>
        </div>
        <div>
          <ve-ring :data ="ringData1" :extend="ringExtend1" :settings="ringSettings1" :data-empty="ringEmpty"></ve-ring>
          <!-- <div class="myDoughnut" ref="myDoughnut"></div> -->
        </div>
      </el-card>
    </el-col>
    <el-col :span="12" :offset="1" class="right-col">
      <el-card>
        <div slot="header" class="clearfix">
         <el-button style="float: left; padding: 3px 0" type="text">现场排名</el-button>
         <el-button style="float: right; padding: 3px 0" type="text" @click="this.rankShow">详情>></el-button>
        </div>
        <el-table 
          border
          ref="tableData" 
          :data='tableData' 
          :header-cell-style="{background:'#eaf4f8'}"
          class="tableMarginTop" 
          header-row-class-name="tableHeaderClass"
          style="font-size: 10px">    
          <el-table-column prop='object' width='120px'  label='对象'></el-table-column>
          <el-table-column prop='ranking' width='50px' label='综合得分排名'></el-table-column>
          <el-table-column prop='percapacity'  :label="'人均产能 \n (20%)'"></el-table-column>
          <el-table-column prop='aht'  :label="'AHT \n (20%)'"></el-table-column>
          <el-table-column prop='errorrate'  :label="'差错率\n(20%)'"></el-table-column>
          <el-table-column prop='npsrecommend'  :label="'NPS推荐率\n(20%)'"></el-table-column>
          <el-table-column prop='satisfaction' :label="'满意度\n(10%)'"></el-table-column>
          <el-table-column prop='punctuality' :label="'遵时率\n(20%)'"></el-table-column>
        </el-table>
      </el-card>
    </el-col>
  </el-row>


  <el-row class="main" v-if="this.radio1=='2'">
    <el-col :span="11" class="left-col">
      <el-card>
        <div slot="header" class="clearfix">
          <el-button style="float: left; padding: 3px 0" type="text" @click="this.evaluatingShow">六维评测✄</el-button>
            <el-button style="float: left; padding: 3px 0" type="text" @click="queryCallsix">查询六维评测</el-button>
          <el-button style="float: right; padding: 3px 0" type="text" @click="this.detailShow">详情>></el-button>
        </div>
        <div>
          <!-- <div class="myHexagon" ref="myHexagon2"></div> -->
          <ve-radar :data="radarData2" :settings="radarSettings2" :extend="radarExtend2" ></ve-radar>
        </div>
      </el-card>
    </el-col>
    <el-col :span="12" :offset="1" class="right-col">
    <el-card >
      <div slot="header" class="clearfix" >
          <el-col>
            <el-button style="float: left; padding: 3px 0" type="text"   >队列详情</el-button>
         </el-col>
       </div >
      <el-table
        :data="tableData1"
        ref="tableData"
        :header-cell-style="{background:'#eaf4f8'}"
        border
        highlight-current-row
        header-row-class-name="tableHeaderClass"
        height="400">
        <el-table-column prop="object" label="对象"></el-table-column>
        <el-table-column prop="YY_CurrentNUM_CallWait" label="当期排队数"></el-table-column>
        <el-table-column prop="YY_NUM_CallMissed" label="呼损量"></el-table-column>
        <el-table-column prop="YY_NUM_Calls" label="人工请求量"></el-table-column>
        <el-table-column prop="YY_NUM_CallAnswer" label="人工接通量" ></el-table-column>
        <el-table-column prop="YY_NUM_CallAnswer_per" label="人工接通率"></el-table-column>
        <el-table-column prop="YY_NUM_CallsAnswerIn20s_per" label="20S服务水平" ></el-table-column>
      </el-table>
    </el-card>
      <!-- <el-card >
        <div slot="header" class="clearfix">
         <el-button style="float: left; padding: 3px 0" type="text" @click="this.showTendencyMap">趋势</el-button>
         <el-button style="float: right; padding: 3px 0" type="text" @click="this.detailShow">详情>></el-button>
        </div>
        <div style="float: right;" >
           时间粒度：
         <el-radio v-model="radio" label="1" style="color:#2ca7e9; padding-left: 0px; margin: 0px; ">15分钟</el-radio>
         <el-radio v-model="radio" label="2" style="color:#2ca7e9; padding-left: 0px; margin: 0px;">30分钟</el-radio>
         <el-radio v-model="radio" label="4" style="color:#2ca7e9; padding-left: 0px; margin: 0px;">60分钟</el-radio>
         <el-radio v-model="radio" label="5" style="color:#2ca7e9; padding-left: 0px; margin: 0px;">天</el-radio>
        <div style="float: right;"><span class="class1"></span>实际值</div> 
         <div style="float: right;"><span class="class2"></span>目标值</div>
        
        </div>
        <div class="linstyel">
          <el-row class="main1">
            <el-col :span="8"  >
              <ve-line   :data="lineData7" width="100%" height="240px" :extend="lineExtend7" :legend-visible="false"  ></ve-line>
            </el-col>
            <el-col :span="8"  >
              <ve-line   :data="lineData8" width="100%" height="240px" :extend="lineExtend8" :legend-visible="false"  ></ve-line>
            </el-col>
            <el-col :span="8"  >
              <ve-line   :data="lineData9" width="100%" height="240px" :extend="lineExtend9" :legend-visible="false"  ></ve-line>
            </el-col>
            <el-col :span="8"  >
              <ve-line   :data="lineData10" width="100%" height="240px" :extend="lineExtend10" :legend-visible="false"  ></ve-line>
            </el-col>
            <el-col :span="8"  >
              <ve-line   :data="lineData11" width="100%" height="240px" :extend="lineExtend11" :legend-visible="false"  ></ve-line>
            </el-col>
            <el-col :span="8"  >
              <ve-line   :data="lineData12" width="100%" height="240px" :extend="lineExtend12" :legend-visible="false"  ></ve-line>
            </el-col>
          </el-row>
        </div>
      </el-card> -->
    </el-col>
  </el-row>

  <el-row class="main" v-if="this.radio1=='2'" style="margin-top:20px"> 
    <el-col  class="total-col">
      <el-card>
        <div slot="header" class="clearfix" >
          <el-col>
            <el-button style="float: left; padding: 3px 0" type="text"  @click="this.showAgentMap" >话量趋势对比图</el-button>
            <el-radio v-model="radio2" label="total"  style=" padding: 12px 20px;color:#2ca7e9">合计</el-radio>
            <el-radio v-model="radio2" label="sub" style=" padding: 12px 20px;color:#2ca7e9;margin-left:0">分队列查看</el-radio>
            <el-button style="float: right; padding: 3px 0" type="text" @click="this.rankShow">详情>></el-button>
         </el-col>
       
       </div >
             <el-form v-if="this.radio2=='total'"    :model="form" size="mini" label-position="top" ref="form">
             <el-row :gutter="10">
            <el-col :span="5">
               <el-form-item>
              <el-button type="primary" icon="el-icon-search" :loading="loading" size="mini" @click="query">查询</el-button>
                <el-button type='warning' size='mini' icon='el-icon-refresh' @click="clearForm('form')">重置</el-button>
              </el-form-item>
              
            </el-col>
             <el-col :span="3" >
               <el-form-item   prop="startTime">
                    <el-time-select
                     style="width:150px" 
                      placeholder="起始时间"
                      @change="getStartTime"
                      
                      default-value="08:00"
                      clearable
                      v-model="startTime"
                      :picker-options="{
                        start: '08:00',
                        step: '00:30',
                        end: '20:00',
                        
                      }">
                    </el-time-select>
                </el-form-item>
               </el-col>
                <el-col :span="3" >
                  <el-form-item   prop="endTime">
                      <el-time-select 
                      style="width:150px" 
                          placeholder="结束时间"
                          @change="getEndtime"
                           default-value="12:00"
                          clearable
                          v-model="endTime"
                          :picker-options="{
                            start: '08:00',
                            step: '00:30',
                            end: '20:00',
                            minTime: startTime
                          
                          }">
                    </el-time-select>
                  </el-form-item>
                 
             </el-col>
              <el-col :span="3">
             <!-- <span>时间粒度</span> -->
               <el-form-item   prop="timeInterval">
                   <el-select v-model="form.timeInterval" style="width:150px"  filterable placeholder="请选择时间粒度">
                            <el-option
                                    v-for="item in timeIntervalList"
                                    clearable
                                    :key="item.value"
                                    :label="item.name"
                                    :value="item.value"
                                    :disabled="item.disabled"
                  ></el-option>
                  </el-select>
                </el-form-item>
            </el-col >
             <!-- <el-col :span="6" :offset="6">
               <el-form-item>
              <el-button type="primary" icon="el-icon-search" :loading="loading" size="mini" @click="query">查询</el-button>
                <el-button type='warning' size='mini' icon='el-icon-refresh' @click="clearForm('form')">重置</el-button>
              </el-form-item>
              
            </el-col> -->
           </el-row>
          </el-form>
        <!-- <div v-if="this.radio2=='total'"  class="mainChart"  ref="mainChart"></div> -->
        <ve-histogram  v-if="this.radio2=='total'"  :data="histogramData1" :extend="histogramExtend1" :settings="histogramSettings1" :colors="histogramColors1"  width="100%" height="420px" ></ve-histogram>
        <div v-if="this.radio2=='sub'" >
        <div>
        <span style="color:#409EFF">互联网金融</span>
          <hr>
        </div>
        <el-col :span="15" class="left-col">
          <div >
            <span style="color:#409EFF">话量趋势对比图</span>
            <hr>
          </div>
          <!-- <div class="subChart"  ref="mainChart2"></div> -->
          <!-- :legend-visible="false" 图例不可见 -->
          <ve-histogram    :data="histogramData2" :extend="histogramExtend2" :settings="histogramSettings2" :colors="histogram2Colors" :legend-visible="false"  width="100%" height="320px" ></ve-histogram>
        </el-col>
        <el-col :span="8" class="right-col">
          <div >
            <span style="color:#409EFF">当前排队人数</span>
            <hr>
          </div>
          <div>
            <img src="../../../../static/images/image/people.png"/>
            <img src="../../../../static/images/image/people.png"/>
            <img src="../../../../static/images/image/people.png"/>
            <img src="../../../../static/images/image/people.png"/>
            <img src="../../../../static/images/image/people.png"/>
            <img src="../../../../static/images/image/people.png"/>
            <img src="../../../../static/images/image/people.png"/>
            <img src="../../../../static/images/image/people.png"/>
            <img src="../../../../static/images/image/people.png"/>
            <img src="../../../../static/images/image/people.png"/>
            <span style="color:#ff6c56;font-size:26px;font-weight:bold;float:right">0</span>
          </div>
          <div style="margin-top:10px">
            <span style="color:#409EFF">坐席人员分布</span>
            <hr>
          </div>
          <div>
            <!-- <div class="myDoughnut2" ref="myDoughnut2"></div> -->
            <ve-ring :data ="ringData2" height="150px" :extend="ringExtend2" :settings="ringSettings2"  :legend-visible="false" ></ve-ring>
          </div>
        </el-col>
        <!-- <el-col :span="1">
        </el-col> -->
        <el-col :span="24">
          <div>
            <span style="color:#409EFF">OTA业务</span>
            <hr>
          </div>
        </el-col>
        <el-col :span="15" class="left-col">
          <div >
            <span style="color:#409EFF">话量趋势对比图</span>
            <hr>
          </div>
          <!-- <div class="subChart"  ref="mainChart3"></div> -->
           <ve-histogram    :data="histogramData3" :extend="histogramExtend3" :settings="histogramSettings3" :colors="histogramColors" :legend-visible="false"  width="100%" height="320px" ></ve-histogram>
        </el-col>
        <el-col :span="8" class="right-col">
          <div >
            <span style="color:#409EFF">当前排队人数</span>
            <hr>
          </div>
          <div>
            <img src="../../../../static/images/image/people.png"/>
            <img src="../../../../static/images/image/people.png"/>
            <img src="../../../../static/images/image/people.png"/>
            <img src="../../../../static/images/image/people.png"/>
            <img src="../../../../static/images/image/people.png"/>
            <img src="../../../../static/images/image/people.png"/>
            <img src="../../../../static/images/image/people.png"/>
            <img src="../../../../static/images/image/people.png"/>
            <img src="../../../../static/images/image/people.png"/>
            <img src="../../../../static/images/image/people.png"/>
            <span style="color:#ff6c56;font-size:26px;font-weight:bold;float:right">18</span>
          </div>
          <div style="margin-top:10px">
            <span style="color:#409EFF">坐席人员分布</span>
            <hr>
          </div>
          <div>
            <!-- <div class="myDoughnut2" ref="myDoughnut3"></div> -->
            <ve-ring :data ="ringData3" height="150px" :extend="ringExtend3" :settings="ringSettings3"  :legend-visible="false" ></ve-ring>
          </div>
        </el-col>
        <el-col :span="24">
          <div>
            <hr>
          </div>
        </el-col>
        </div>
      </el-card>

    </el-col>
  </el-row>

  <el-row class="othermain" v-if="this.radio1=='2'" >
    <el-col :span="11" class="left-col">
      <el-card>
        <div slot="header" class="clearfix">
          <el-button style="float: left; padding: 3px 0" type="text" @click="this.showAgentMap">实时坐席状态✄</el-button>
          <el-button style="float: right; padding: 3px 0" type="text"  @click="this.agentShow">详情>></el-button>
        </div>
        <div>
          <!-- <div class="myDoughnut" ref="myDoughnut4"></div> -->
          <ve-ring :data ="ringData1" :extend="ringExtend1" :settings="ringSettings1"></ve-ring>
        </div>
      </el-card>
    </el-col>
    <el-col :span="12" :offset="1" class="right-col" >
      <el-card style="height:525px">
        <div slot="header" class="clearfix">
         <el-button style="float: left; padding: 3px 0" type="text">人工服务分类</el-button>
         <el-button style="float: right; padding: 3px 0" type="text">详情>></el-button>
        </div>
        <div :style="{float:'left'}">
          <!-- <div class="myDoughnut3" ref="myDoughnut5"></div> -->
          <ve-ring :data ="ringData4" :extend="ringExtend4" :settings="ringSettings4" width="300px" height="220px" :grid="ringGrid" :legend-visible="false"></ve-ring>
        </div>
        <div class="col-xs-4"  >
          <ul class="seatAnnularTwoLegend"  >
            <li class="legendOne" @mouseover="hoverOne"><span class="percentage">30%</span><span class="numValue">22986</span><span>故障报修</span></li>
            <li class="legendTwo" @mouseover="hoverTwo"><span class="percentage">17%</span><span class="numValue">13025</span><span>咨询</span></li>
            <li class="legendThree" @mouseover="hoverThree"><span class="percentage">30%</span><span class="numValue">22986</span><span>意见建议</span></li>
            <li class="legendFour" @mouseover="hoverFour"><span class="percentage">8%</span><span class="numValue">6130</span><span>投诉举报</span></li>
            <li class="legendFive" @mouseover="hoverFive"><span class="percentage">15%</span><span class="numValue">11493</span><span>其他</span></li>
          </ul>
        </div>
        <div class="col-xs-4">
          <div class="legendListDetail">
            <ul class="legendOneList  hidden" v-if="showOne">
              <div class="title">故障报修分类:</div>
              <li><em class="icon"></em><span class="legendName">人工服务请求量</span>854</li>
              <li><em class="icon"></em><span class="legendName">人工服务接通量</span>831</li>
              <li><em class="icon"></em><span class="legendName">人工服务接通率</span>97.31%</li>
              <li><em class="icon"></em><span class="legendName">20s服务水平</span>98.24%</li>
              <li><em class="icon"></em><span class="legendName">当前人工排队数</span>2</li>

            </ul>
            <ul class="legendTwoList" v-if="showTwo">
              <div class="title">咨询分类:</div>
              <li><em class="icon"></em><span class="legendName">人工服务请求量</span>76620</li>
              <li><em class="icon"></em><span class="legendName">人工服务接通量</span>75545</li>
              <li><em class="icon"></em><span class="legendName">人工服务接通率</span>98.60%</li>
              <li><em class="icon"></em><span class="legendName">20s服务水平</span>87.24%</li>
              <li><em class="icon"></em><span class="legendName">当前人工排队数</span>18</li>
            </ul>
            <ul class="legendThreeList hidden" v-if="showThree">
              <div class="title">意见建议分类:</div>
              <li><em class="icon"></em><span class="legendName">人工服务请求量</span>854</li>
              <li><em class="icon"></em><span class="legendName">人工服务接通量</span>831</li>
              <li><em class="icon"></em><span class="legendName">人工服务接通率</span>97.31%</li>
              <li><em class="icon"></em><span class="legendName">20s服务水平</span>98.24%</li>
              <li><em class="icon"></em><span class="legendName">当前人工排队数</span>2</li>
            </ul>
            <ul class="legendFourList hidden" v-if="showFour">
              <div class="title">投诉举报分类:</div>
              <li><em class="icon"></em><span class="legendName">人工服务请求量</span>854</li>
              <li><em class="icon"></em><span class="legendName">人工服务接通量</span>831</li>
              <li><em class="icon"></em><span class="legendName">人工服务接通率</span>97.31%</li>
              <li><em class="icon"></em><span class="legendName">20s服务水平</span>98.24%</li>
              <li><em class="icon"></em><span class="legendName">当前人工排队数</span>2</li>
            </ul>
            <ul class="legendFiveList hidden" v-if="showFive">
              <div class="title">其他分类:</div>
              <li><em class="icon"></em><span class="legendName">人工服务请求量</span>854</li>
              <li><em class="icon"></em><span class="legendName">人工服务接通量</span>831</li>
              <li><em class="icon"></em><span class="legendName">人工服务接通率</span>97.31%</li>
              <li><em class="icon"></em><span class="legendName">20s服务水平</span>98.24%</li>
              <li><em class="icon"></em><span class="legendName">当前人工排队数</span>2</li>
            </ul>
          </div>
        </div>
      </el-card>
    </el-col>
  </el-row>

  <keep-alive>
    <component :is="dialogList.siteTendency" :option="dialogOptions" ></component>
  </keep-alive>
  <keep-alive>
    <component :is="dialogList.agentList" :option="dialogOptionsA" ></component>
  </keep-alive>
  <keep-alive>
    <component :is="dialogList.siteRanking" :option="dialogOptionsB" ></component>
  </keep-alive>
  <keep-alive>
    <component :is="dialogList.siteEvaluating" :option="dialogOptionsC" ></component>
  </keep-alive>
  <keep-alive>
    <component :is="dialogList.siteTendencyMap" :option="dialogOptionsD" ></component>
  </keep-alive>
  <keep-alive>
    <component :is="dialogList.siteAgentMap" :option="dialogOptionsE" ></component>
  </keep-alive>
  </div>
</template>
<!--<script src="../../../../node_modules/webpack-dev-server/client/web_modules/jquery/jquery-1.8.1.js" />
-->

<script>

import selectTree from "@/components/selectTree4/";
import echarts from 'echarts';
import toolBox from "@/common/utils/toolBox";
import siteTendency from "./dialog/siteTendency";
import siteTendencyMap from "./dialog/siteTendencyMap";
import siteAgentMap from "./dialog/siteAgentMap";
import agentList from "./dialog/agentList";
import siteRanking from "./dialog/siteRanking";
import siteEvaluating from "./dialog/siteEvaluating";
import veRadar from "v-charts/lib/radar";
import veLine from "v-charts/lib/line";
import veRing from "v-charts/lib/ring";
import veHistogram from "v-charts/lib/histogram";
import queryQueDetail from "@/message/siteManagement/queueDetail/query";
import 'v-charts/lib/style.css';
// 发送接口
import request1 from "@/common/utils/requestYg";
// 趋势对比图-电话  查询 
import query from "@/message/siteManagement/siteCondition/query";
// 六维评测-电话 查询 
import queryCallsix from "@/message/siteManagement/siteCondition/queryCallsix";
import comQuery from "@/message/siteManagement/seatStatusDetail/comQuery";

export default {
  name: '',
  components: {
    selectTree,
    veRadar,
    veLine,
    veRing,
    veHistogram
  },
  data() {



    return {
      form1:{
        company:"",
        group:"",
        agentid:""
      },
      teamList: [],
      companyList: [],
      currentPage: 1,
      //1页左上
      radarData:{
         columns:['情况','20s服务水平','人工总接通量','呼损数','人工接通率','当前排队数','总进线量'],
       
        rows:[
          {'情况':'目标值','20s服务水平':105,'人工总接通量':170,'呼损数':88,'人工接通率':85,'当前排队数':85,'总进线量':8},
          {'情况':'实际值','20s服务水平':110,'人工总接通量':180,'呼损数':91,'人工接通率':84,'当前排队数':89,'总进线量':6.9},
        ],
        
      },
      radarEmpty: false, 
      radarExtend:{
        series: {
          // type: "bar",
          // barGap: "-100%"
          label:{
            show:true,
            // formatter:'{b}:{c}',
              formatter:(params)=>{
                // console.log("六维评测的params",params);
                return params.value
              },
          },
          // label : this.extend(label,textStyle)
        },
        radar:{
          name:{
            formatter:'{value}',
            textStyle:{
              fontSize:15,
              color:'#000'
            }
          },
          shape: "polygon",
          indicator:[{
            text:'人均产能',
            max:150
          },{
            text:'AHT',
            max:200
          },{
            text:'满意度',
            max:100
          },{
            text:'遵时率',
            max:100
          },{
            text:'NPS推荐率',
            max:100
          },{
            text:'差错率',
            max:100
          }]
        },
      },
      radarSettings: {
        // itemStyle:{
        //   show:false
        // },
        // labelMap: {
        //   '情况':'option',
        //   '人均产能':'人均产能1',
        //   'AHT':'AHT1',
        //   '满意度':'满意度1',
        //   '遵时率':'遵时率1',
        //   'NPS推荐率':'NPS推荐率1',
        //   '差错率':'差错率1'
        // },
        areaStyle: ["#000"],
      },
      lineData1:{
        columns:['日期','目标值','实际值'],
        rows:[
          // 
          {'日期':'1219','目标值':'105','实际值':'110'},
          {'日期':'1220','目标值':'105','实际值':'128'},
          {'日期':'1221','目标值':'105','实际值':'123'},
          {'日期':'1222','目标值':'105','实际值':'123'},
          {'日期':'1223','目标值':'105','实际值':'109'},
          {'日期':'1224','目标值':'105','实际值':'114'},
          {'日期':'1225','目标值':'105','实际值':'110'}
        ]
      },
      lineExtend1:{
        title: {
          subtext: '人均产能',
          subtextStyle:{
            fontSize:15,
            color:'black'
          },
          top:1,
          left:'left'
        },
        series: {
          symbol:'none',
          smooth:false,
          
        },
        xAxis:{
          boundaryGap:false,
        },
      },
      lineSetting1:{
        // area:true,
      },

      lineData2:{
        columns:['日期','目标值','实际值'],
        rows:[
          {'日期':'1219','目标值':'170','实际值':'135'},
          {'日期':'1220','目标值':'170','实际值':'158'},
          {'日期':'1221','目标值':'170','实际值':'170'},
          {'日期':'1222','目标值':'170','实际值':'199'},
          {'日期':'1223','目标值':'170','实际值':'195'},
          {'日期':'1224','目标值':'170','实际值':'198'},
          {'日期':'1225','目标值':'170','实际值':'180'}
        ]
      },
      lineExtend2:{
        title: {
          subtext: 'AHT',
          subtextStyle:{
            fontSize:15,
            color:'black'
          },
          top:1,
          left:'left'
        },
        series: {
          symbol:'none',
          smooth:false,
        },
        xAxis:{
          boundaryGap:false,
        },
      },

      lineData3:{
        columns:['日期','目标值','实际值'],
        rows:[
          {'日期':'1219','目标值':'88','实际值':'88.2'},
          {'日期':'1220','目标值':'88','实际值':'91.7'},
          {'日期':'1221','目标值':'88','实际值':'93.3'},
          {'日期':'1222','目标值':'88','实际值':'95'},
          {'日期':'1223','目标值':'88','实际值':'94.4'},
          {'日期':'1224','目标值':'88','实际值':'92.8'},
          {'日期':'1225','目标值':'88','实际值':'91'}
        ]
      },
      lineExtend3:{
        title: {
          subtext: '满意度',
          subtextStyle:{
            fontSize:15,
            color:'black'
          },
          top:1,
          left:'left'
        },
        series: {
          symbol:'none',
          smooth:false,
        },
        xAxis:{
          boundaryGap:false,
        },
      },

      lineData4:{
        columns:['日期','目标值','实际值'],
        rows:[
          {'日期':'1219','目标值':'8','实际值':'8.64'},
          {'日期':'1220','目标值':'8','实际值':'6.06'},
          {'日期':'1221','目标值':'8','实际值':'6.94'},
          {'日期':'1222','目标值':'8','实际值':'7'},
          {'日期':'1223','目标值':'8','实际值':'5.56'},
          {'日期':'1224','目标值':'8','实际值':'6.83'},
          {'日期':'1225','目标值':'8','实际值':'6.9'}
        ]
      },
      lineExtend4:{
        title: {
          subtext: '差错率',
          subtextStyle:{
            fontSize:15,
            color:'black'
          },
          top:1,
          left:'left'
        },
        series: {
          symbol:'none',
          smooth:false,
        },
        xAxis:{
          boundaryGap:false,
        },
      },

      lineData5:{
        columns:['日期','目标值','实际值'],
        rows:[
          {'日期':'1219','目标值':'85','实际值':'86.15'},
          {'日期':'1220','目标值':'85','实际值':'83.21'},
          {'日期':'1221','目标值':'85','实际值':'82.9'},
          {'日期':'1222','目标值':'85','实际值':'93.1'},
          {'日期':'1223','目标值':'85','实际值':'94.2'},
          {'日期':'1224','目标值':'85','实际值':'92.9'},
          {'日期':'1225','目标值':'85','实际值':'89'}
        ]
      },
      lineExtend5:{
        title: {
          subtext: 'NPS推荐率',
          subtextStyle:{
            fontSize:15,
            color:'black'
          },
          top:1,
          left:'left'
        },
        series: {
          symbol:'none',
          smooth:false,
        },
        xAxis:{
          boundaryGap:false,
        },
      },

      lineData6:{
        columns:['日期','目标值','实际值'],
        rows:[
          {'日期':'1219','目标值':'85','实际值':'79.2'},
          {'日期':'1220','目标值':'85','实际值':'81.3'},
          {'日期':'1221','目标值':'85','实际值':'87.2'},
          {'日期':'1222','目标值':'85','实际值':'85.1'},
          {'日期':'1223','目标值':'85','实际值':'79.6'},
          {'日期':'1224','目标值':'85','实际值':'87.7'},
          {'日期':'1225','目标值':'85','实际值':'84'}
        ]
      },
      lineExtend6:{
        title: {
          subtext: '遵时率',
          subtextStyle:{
            fontSize:15,
            color:'black'
          },
          top:1,
          left:'left'
        },
        series: {
          symbol:'none',
          smooth:false,
        },
        xAxis:{
          boundaryGap:false,
        },
      },

      ringData1:{
        columns:['坐席状态','人数'],
        rows:[
          {'坐席状态':'通话中','人数':310},
          {'坐席状态':'话后处理','人数':70},
          {'坐席状态':'示忙','人数':25},
          {'坐席状态':'三方通话','人数':4},
          {'坐席状态':'呼叫拨号','人数':2},
          {'坐席状态':'就绪','人数':11},
          {'坐席状态':'小休','人数':9},
          {'坐席状态':'转TPIN','人数':3},
          {'坐席状态':'振铃','人数':2},
          {'坐席状态':'其他','人数':4},
        ],
      },
      ringEmpty: false, 
      ringExtend1:{
        title:{
          text:'今日签入:',
          textStyle:{
            fontSize:25,
            fontWeight:'normal',
          },
          subtext:'530',
          subtextStyle:{
            fontSize:40,
            fontWeight:'bolder'
          },
          x:'center',
          y:235
        },
        series:{
          color: ['#2ca7e9','#ff921d','#4daf5d','#6372b9','#a7d056','#e1b737','#ed6856','#918ab7','#5cc6b6','#147e88'],
          formatter:'{b}:{c}({d}%)'
        },
        legend:{
          // orient:'vertical',
          // x:'left',
          // y:'bottom',
          data:['通话中','话后处理','示忙','三方通话','呼叫拨号','就绪','小休','转TPIN','振铃','其他'],
          formatter:function(name){
            var index = 0;
            var clientlabels = ['通话中','话后处理','示忙','三方通话','呼叫拨号','就绪','小休','转TPIN','振铃','其他'];
            var clientcounts = ['310','70','25','4','2','11','9','3','2','4'];
            clientlabels.forEach(function(value,i){
              if(value==name){
                index = i;
              }
            });
            return name +":   "+clientcounts[index];
          }
        },
      },
      ringSettings1:{
        radius:['50%','60%'],
        label:{
          formatter:'{b}:{c}({d}%)'
        },
        offsetY:270
      },
      //2页左上
      radarData2:{
        columns:['情况','人工总接通量','总进线量','呼损数','人工接通率','20s接通量','当前排队数'],
          
        rows:[
          {'情况':'目标值','人工总接通量':10,'总进线量':90,'呼损数':95,'人工接通率':78,'20s接通量':85,'当前排队数':0},
          {'情况':'实际值','人工总接通量':12,'总进线量':38,'呼损数':97.7,'人工接通率':78.6,'20s接通量':78.95,'当前排队数':10},
        ],
        
      },
      radarExtend2:{
        series: {
          // type: "bar",
          // barGap: "-100%"
        },
        radar:{
          shape: "polygon",
          indicator:[{
            text:'人工总接通量',
            max:20
          },{
            text:'总进线量',
            max:100
          },{
            text:'呼损数',
            max:100
          },{
            text:'人工接通率',
            max:100
          },{
            text:'20s接通量',
            max:100
          },{
            text:'当前排队数',
            max:100
          }]
        }
      },
      radarSettings2: {
        areaStyle: ["#000"],
      },

      lineData7:{
        columns:['时间','目标值','实际值'],
        rows:[
          {'时间':'00:00','目标值':'10','实际值':'11'},
          {'时间':'01:00','目标值':'10','实际值':'14'},
          {'时间':'02:00','目标值':'10','实际值':'12'},
          {'时间':'03:00','目标值':'10','实际值':'18'},
          {'时间':'04:00','目标值':'10','实际值':'11'},
          {'时间':'05:00','目标值':'10','实际值':'20'},
          {'时间':'06:00','目标值':'10','实际值':'15'},
          {'时间':'07:00','目标值':'10','实际值':'16'},
          {'时间':'08:00','目标值':'10','实际值':'18'},
          {'时间':'09:00','目标值':'10','实际值':'14'},
          {'时间':'10:00','目标值':'10','实际值':'17'},
          {'时间':'11:00','目标值':'10','实际值':'16'},
          {'时间':'12:00','目标值':'10','实际值':'15'},
          {'时间':'13:00','目标值':'10','实际值':'17'},
          {'时间':'14:00','目标值':'10','实际值':'15'},
          {'时间':'15:00','目标值':'10','实际值':'12'},
        ]
      },
      lineExtend7:{
        title: {
          subtext: '人工总接通量',
          subtextStyle:{
            fontSize:15,
            color:'black'
          },
          top:1,
          left:'left'
        },
        series: {
          symbol:'none',
          smooth:false,
        },
        xAxis:{
          boundaryGap:false,
        },
      },

      lineData8:{
        columns:['时间','目标值','实际值'],
        rows:[
          {'时间':'00:00','目标值':'0','实际值':'0'},
          {'时间':'01:00','目标值':'0','实际值':'0'},
          {'时间':'02:00','目标值':'0','实际值':'0'},
          {'时间':'03:00','目标值':'0','实际值':'0'},
          {'时间':'04:00','目标值':'0','实际值':'0'},
          {'时间':'05:00','目标值':'0','实际值':'0'},
          {'时间':'06:00','目标值':'0','实际值':'0'},
          {'时间':'07:00','目标值':'0','实际值':'5'},
          {'时间':'08:00','目标值':'0','实际值':'10'},
          {'时间':'09:00','目标值':'0','实际值':'12'},
          {'时间':'10:00','目标值':'0','实际值':'14'},
          {'时间':'11:00','目标值':'0','实际值':'19'},
          {'时间':'12:00','目标值':'0','实际值':'20'},
          {'时间':'13:00','目标值':'0','实际值':'32'},
          {'时间':'14:00','目标值':'0','实际值':'5'},
          {'时间':'15:00','目标值':'0','实际值':'10'},
        ]
      },
      lineExtend8:{
        title: {
          subtext: '当前排队数',
          subtextStyle:{
            fontSize:15,
            color:'black'
          },
          top:1,
          left:'left'
        },
        series: {
          symbol:'none',
          smooth:false,
        },
        xAxis:{
          boundaryGap:false,
        },
      },
      
      lineData9:{
        columns:['时间','目标值','实际值'],
        rows:[
          {'时间':'00:00','目标值':'78','实际值':'78.5'},
          {'时间':'01:00','目标值':'78','实际值':'82.8'},
          {'时间':'02:00','目标值':'78','实际值':'79.6'},
          {'时间':'03:00','目标值':'78','实际值':'79.6'},
          {'时间':'04:00','目标值':'78','实际值':'84.6'},
          {'时间':'05:00','目标值':'78','实际值':'82.2'},
          {'时间':'06:00','目标值':'78','实际值':'81.3'},
          {'时间':'07:00','目标值':'78','实际值':'80.7'},
          {'时间':'08:00','目标值':'78','实际值':'79.1'},
          {'时间':'09:00','目标值':'78','实际值':'78.3'},
          {'时间':'10:00','目标值':'78','实际值':'81.2'},
          {'时间':'11:00','目标值':'78','实际值':'78.7'},
          {'时间':'12:00','目标值':'78','实际值':'73.2'},
          {'时间':'13:00','目标值':'78','实际值':'79.8'},
          {'时间':'14:00','目标值':'78','实际值':'82.5'},
          {'时间':'15:00','目标值':'78','实际值':'78.6'},
        ]
      },
      lineExtend9:{
        title: {
          subtext: '20s接通量',
          subtextStyle:{
            fontSize:15,
            color:'black'
          },
          top:1,
          left:'left'
        },
        series: {
          symbol:'none',
          smooth:false,
        },
        xAxis:{
          boundaryGap:false,
        },
      },

      lineData10:{
        columns:['时间','目标值','实际值'],
        rows:[
          {'时间':'00:00','目标值':'85','实际值':'85.79'},
          {'时间':'01:00','目标值':'85','实际值':'84.19'},
          {'时间':'02:00','目标值':'85','实际值':'86.86'},
          {'时间':'03:00','目标值':'85','实际值':'84.86'},
          {'时间':'04:00','目标值':'85','实际值':'87.01'},
          {'时间':'05:00','目标值':'85','实际值':'90.58'},
          {'时间':'06:00','目标值':'85','实际值':'86.66'},
          {'时间':'07:00','目标值':'85','实际值':'89.95'},
          {'时间':'08:00','目标值':'85','实际值':'90.14'},
          {'时间':'09:00','目标值':'85','实际值':'84'},
          {'时间':'10:00','目标值':'85','实际值':'83'},
          {'时间':'11:00','目标值':'85','实际值':'82.97'},
          {'时间':'12:00','目标值':'85','实际值':'81.46'},
          {'时间':'13:00','目标值':'85','实际值':'80.76'},
          {'时间':'14:00','目标值':'85','实际值':'79.82'},
          {'时间':'15:00','目标值':'85','实际值':'78.95'},
        ]
      },
      lineExtend10:{
        title: {
          subtext: '人工接通率',
          subtextStyle:{
            fontSize:15,
            color:'black'
          },
          top:1,
          left:'left'
        },
        series: {
          symbol:'none',
          smooth:false,
        },
        xAxis:{
          boundaryGap:false,
        },
      },

      lineData11:{
        columns:['时间','目标值','实际值'],
        rows:[
          {'时间':'00:00','目标值':'90','实际值':'0'},
          {'时间':'01:00','目标值':'90','实际值':'0'},
          {'时间':'02:00','目标值':'90','实际值':'0'},
          {'时间':'03:00','目标值':'90','实际值':'0'},
          {'时间':'04:00','目标值':'90','实际值':'0'},
          {'时间':'05:00','目标值':'90','实际值':'0'},
          {'时间':'06:00','目标值':'90','实际值':'2'},
          {'时间':'07:00','目标值':'90','实际值':'0'},
          {'时间':'08:00','目标值':'90','实际值':'0'},
          {'时间':'09:00','目标值':'90','实际值':'3'},
          {'时间':'10:00','目标值':'90','实际值':'2'},
          {'时间':'11:00','目标值':'90','实际值':'5'},
          {'时间':'12:00','目标值':'90','实际值':'9'},
          {'时间':'13:00','目标值':'90','实际值':'11'},
          {'时间':'14:00','目标值':'90','实际值':'30'},
          {'时间':'15:00','目标值':'90','实际值':'38'},
        ]
      },
      lineExtend11:{
        title: {
          subtext: '呼损数',
          subtextStyle:{
            fontSize:15,
            color:'black'
          },
          top:1,
          left:'left'
        },
        series: {
          symbol:'none',
          smooth:false,
        },
        xAxis:{
          boundaryGap:false,
        },
      },

      lineData12:{
        columns:['时间','目标值','实际值'],
        rows:[
          {'时间':'00:00','目标值':'95','实际值':'98.7'},
          {'时间':'01:00','目标值':'95','实际值':'98.7'},
          {'时间':'02:00','目标值':'95','实际值':'98.4'},
          {'时间':'03:00','目标值':'95','实际值':'98'},
          {'时间':'04:00','目标值':'95','实际值':'95.9'},
          {'时间':'05:00','目标值':'95','实际值':'97.7'},
          {'时间':'06:00','目标值':'95','实际值':'97.2'},
          {'时间':'07:00','目标值':'95','实际值':'97.7'},
          {'时间':'08:00','目标值':'95','实际值':'97.9'},
          {'时间':'09:00','目标值':'95','实际值':'98'},
          {'时间':'10:00','目标值':'95','实际值':'98.9'},
          {'时间':'11:00','目标值':'95','实际值':'98.7'},
          {'时间':'12:00','目标值':'95','实际值':'95.3'},
          {'时间':'13:00','目标值':'95','实际值':'96.4'},
          {'时间':'14:00','目标值':'95','实际值':'97.5'},
          {'时间':'15:00','目标值':'95','实际值':'97.7'}
        ]
      },
      lineExtend12:{
        title: {
          subtext: '总进线量',
          subtextStyle:{
            fontSize:15,
            color:'black'
          },
          top:1,
          left:'left'
        },
        series: {
          symbol:'none',
          smooth:false,
        },
        xAxis:{
          boundaryGap:false,
        },
      },
      histogramColors:['#fbec97','#f5a286','#c6a7f8','#61a8e4',],
      histogramColors1:['#fbec97','#f5a286','#c6a7f8','#61a8e4','red','green'],
      histogramData1:{
        columns:['WORKTIME','20s接通量','人工总接通量','呼损数','人工接通率','当前排队数','总进线量'],
        rows:[
          // {'WORKTIME':'04:00','20s接通量':'0','人工总接通量':'0','呼损数':'0','人工接通率':'0','当前排队数':'0','总进线量':'0'},
          // {'WORKTIME':'04:30','20s接通量':'15','人工总接通量':'0','呼损数':'0','人工接通率':'0','当前排队数':'20','总进线量':'60'},
          // {'WORKTIME':'05:00','20s接通量':'15','人工总接通量':'0','呼损数':'0','人工接通率':'0','当前排队数':'20','总进线量':'60'},
          // {'WORKTIME':'05:30','20s接通量':'15','人工总接通量':'0','呼损数':'0','人工接通率':'0','当前排队数':'20','总进线量':'60'},
          // {'WORKTIME':'06:00','20s接通量':'73','人工总接通量':'58','呼损数':'33','人工接通率':'91.6','当前排队数':'20','总进线量':'60'},
          // {'WORKTIME':'06:30','20s接通量':'116','人工总接通量':'101','呼损数':'80','人工接通率':'87.7','当前排队数':'20','总进线量':'60'},
          // {'WORKTIME':'07:00','20s接通量':'139','人工总接通量':'124','呼损数':'99','人工接通率':'82.5','当前排队数':'20','总进线量':'60'},
          // {'WORKTIME':'07:30','20s接通量':'420','人工总接通量':'405','呼损数':'394','人工接通率':'83.3','当前排队数':'20','总进线量':'60'},
          // {'WORKTIME':'08:00','20s接通量':'887','人工总接通量':'872','呼损数':'929','人工接通率':'83.6','当前排队数':'20','总进线量':'60'},
          // {'WORKTIME':'08:30','20s接通量':'1001','人工总接通量':'1096','呼损数':'1153','人工接通率':'83.7','当前排队数':'20','总进线量':'60'},
          // {'WORKTIME':'09:00','20s接通量':'1351','人工总接通量':'1006','呼损数':'1433','人工接通率':'87.1','当前排队数':'20','总进线量':'60'},
          // {'WORKTIME':'09:30','20s接通量':'1074','人工总接通量':'1459','呼损数':'1000','人工接通率':'87.9','当前排队数':'20','总进线量':'60'},
       
        ]
      },
      
      histogramExtend1:{
        series: {
          barWidth:9,
        },
        // yAxis:[{
        //   show:true
        // },{
        //   show:false
        // }
        // ]
        legend:{
          y:"bottom"
        }
      },
      histogramSettings1:{
        showLine: ["人工接通率",'总进线量'],
        axisSite: {
          right: ["人工接通率"],
        },
        yAxisType: ["normal", "normal"],
        yAxisName: ["话量", "比例"],
      },
       histogram2Colors:['green','yellow','blue','red'],

      histogramData2:{
       columns:['时间','今日预测话量','昨天话量','今日话量','服务水平'],
        rows:[
          {'时间':'04:00','今日预测话量':'10','昨天话量':'0','今日话量':'0','服务水平':'0'},
          {'时间':'04:30','今日预测话量':'10','昨天话量':'0','今日话量':'0','服务水平':'0'},
          {'时间':'05:00','今日预测话量':'10','昨天话量':'0','今日话量':'0','服务水平':'0'},
          {'时间':'05:30','今日预测话量':'10','昨天话量':'0','今日话量':'0','服务水平':'0'},
          {'时间':'06:00','今日预测话量':'62','昨天话量':'52','今日话量':'22','服务水平':'94.2'},
          {'时间':'06:30','今日预测话量':'92','昨天话量':'82','今日话量':'52','服务水平':'94.8'},
          {'时间':'07:00','今日预测话量':'108','昨天话量':'98','今日话量':'68','服务水平':'89.1'},
          {'时间':'07:30','今日预测话量':'250','昨天话量':'240','今日话量':'220','服务水平':'87.9'},
          {'时间':'08:00','今日预测话量':'601','昨天话量':'591','今日话量':'561','服务水平':'90.7'},
          {'时间':'08:30','今日预测话量':'712','昨天话量':'702','今日话量':'672','服务水平':'89'},
          {'时间':'09:00','今日预测话量':'886','昨天话量':'876','今日话量':'846','服务水平':'90.4'},
          {'时间':'09:30','今日预测话量':'942','昨天话量':'932','今日话量':'912','服务水平':'93'},
        
        ]
      },
      histogramExtend2:{
        series: {
          barWidth:7,
        },
      },
      histogramSettings2:{
        showLine: ["服务水平",'今日预测话量'],
        axisSite: {
          right: ["服务水平"],
        },
        yAxisType: ["normal", "normal"],
        // yAxisName: ["话量", "服务水平"],
      },

      histogramData3:{
        columns:['时间','今日预测话量','昨天话量','今日话量','服务水平'],
        rows:[
          {'时间':'04:00','今日预测话量':'5','昨天话量':'0','今日话量':'0','服务水平':'0'},
          {'时间':'04:30','今日预测话量':'5','昨天话量':'0','今日话量':'0','服务水平':'0'},
          {'时间':'05:00','今日预测话量':'5','昨天话量':'0','今日话量':'0','服务水平':'0'},
          {'时间':'05:30','今日预测话量':'5','昨天话量':'0','今日话量':'0','服务水平':'0'},
          {'时间':'06:00','今日预测话量':'11','昨天话量':'6','今日话量':'11','服务水平':'89'},
          {'时间':'06:30','今日预测话量':'24','昨天话量':'19','今日话量':'28','服务水平':'80.6'},
          {'时间':'07:00','今日预测话量':'31','昨天话量':'26','今日话量':'31','服务水平':'76'},
          {'时间':'07:30','今日预测话量':'170','昨天话量':'165','今日话量':'174','服务水平':'78.6'},
          {'时间':'08:00','今日预测话量':'286','昨天话量':'281','今日话量':'368','服务水平':'68.85'},
          {'时间':'08:30','今日预测话量':'399','昨天话量':'394','今日话量':'481','服务水平':'70.47'},
          {'时间':'09:00','今日预测话量':'465','昨天话量':'460','今日话量':'587','服务水平':'75.33'},
          {'时间':'09:30','今日预测话量':'532','昨天话量':'527','今日话量':'654','服务水平':'74.43'},
          {'时间':'10:00','今日预测话量':'','昨天话量':'','今日话量':'','服务水平':''},
          {'时间':'10:30','今日预测话量':'','昨天话量':'','今日话量':'','服务水平':''},
          {'时间':'11:00','今日预测话量':'','昨天话量':'','今日话量':'','服务水平':''},
          {'时间':'11:30','今日预测话量':'','昨天话量':'','今日话量':'','服务水平':''},
          {'时间':'12:00','今日预测话量':'','昨天话量':'','今日话量':'','服务水平':''},
          {'时间':'12:30','今日预测话量':'','昨天话量':'','今日话量':'','服务水平':''},
          {'时间':'13:00','今日预测话量':'','昨天话量':'','今日话量':'','服务水平':''},
          {'时间':'13:30','今日预测话量':'','昨天话量':'','今日话量':'','服务水平':''},
          {'时间':'14:00','今日预测话量':'','昨天话量':'','今日话量':'','服务水平':''},
          {'时间':'14:30','今日预测话量':'','昨天话量':'','今日话量':'','服务水平':''},
          {'时间':'15:00','今日预测话量':'','昨天话量':'','今日话量':'','服务水平':''},
        ]
      },
      histogramExtend3:{
        series: {
          barWidth:7,
        },
      },
      histogramSettings3:{
        showLine: ["服务水平",'今日预测话量'],
        axisSite: {
          right: ["服务水平"],
        },
        yAxisType: ["normal", "normal"],
        // yAxisName: ["话量", "服务水平"],
      },
      
      ringData2:{
        columns:['坐席状态','人数'],
        rows:[
          {'坐席状态':'通话中','人数':110},
          {'坐席状态':'话后处理','人数':27},
          {'坐席状态':'示忙','人数':14},
          {'坐席状态':'就绪','人数':11},
          {'坐席状态':'小休','人数':3},
          {'坐席状态':'其他','人数':5},
        ],
      },
      ringExtend2:{
        title:{
          text:'今日签入:',
          textStyle:{
            fontSize:15,
            fontWeight:'normal',
          },
          subtext:'200',
          subtextStyle:{
            fontSize:20,
            fontWeight:'bolder'
          },
          x:'center',
          y:60
        },
        series:{
          color: ['#2ca7e9','#ff921d','#4daf5d','#6372b9','#a7d056','#e1b737','#ed6856','#918ab7','#5cc6b6','#147e88'],
          formatter:'{b}:{c}({d}%)'
        }
      },
      ringSettings2:{
        radius:['60%','73%'],
        label:{
          formatter:'{b}:{c}({d}%)'
        },
        labelline:{
        },
        offsetY:80
      },

      ringData3:{
        columns:['坐席状态','人数'],
        rows:[
          {'坐席状态':'通话中','人数':200},
          {'坐席状态':'话后处理','人数':43},
          {'坐席状态':'示忙','人数':11},
          {'坐席状态':'就绪','人数':0},
          {'坐席状态':'小休','人数':6},
          {'坐席状态':'其他','人数':10},
        ],
      },
      ringExtend3:{
        title:{
          text:'今日签入:',
          textStyle:{
            fontSize:15,
            fontWeight:'normal',
          },
          subtext:'300',
          subtextStyle:{
            fontSize:20,
            fontWeight:'bolder'
          },
          x:'center',
          y:66
        },
        series:{
          color: ['#2ca7e9','#ff921d','#4daf5d','#6372b9','#a7d056','#e1b737','#ed6856','#918ab7','#5cc6b6','#147e88'],
          formatter:'{b}:{c}({d}%)'
        },

      },
      ringSettings3:{
         radius:['60%','73%'],
        // center:['50%','50%'],
        label:{
          formatter:'{b}:{c}({d}%)'
        },
        labelline:{
        },
        offsetY:90
      },

      ringData4:{
        columns:['分类','数量'],
        rows:[
          {'分类':'故障报修','数量':22986},
          {'分类':'咨询','数量':13025},
          {'分类':'意见建议','数量':22986},
          {'分类':'投诉举报','数量':6130},
          {'分类':'其他','数量':11493},
        ],
      },
      ringExtend4:{
        title:{
          text:'76620',
          textStyle:{
            fontSize:25,
            fontWeight:'normal',
          },
          subtext:'总数',
          subtextStyle:{
            fontSize:15,
            fontWeight:'bolder'
          },
          x:150,
          y:80,
          textAlign:'center',
        },
        series:{
          color: ['#2ca7e9','#ff921d','#4daf5d','#6372b9','#a7d056','#e1b737','#ed6856','#918ab7','#5cc6b6','#147e88'],
          formatter:'{b}:{c}({d}%)',
          center:['50%','45%'],
        },

      },
      ringSettings4:{
        radius:['56%','68%'],
        label:{
          show: false,
          formatter:'{b}:{c}({d}%)'
        },
        labelline:{
        },
      },
      ringGrid:{
        // height: '220px',
        width:'300px',
        margin: '0px auto',
        float:'left'
      },
       loading: false, //loading遮罩
      showOne:true,
      showTwo:false,
      showThree:false,
      showFour:false,
      showFive:false,
      radio:"",
      radio1:"1",
      radio2:"total",
      radio3:"",
      startTime:'',
      endTime:'',
      timeInterval:'',
      tableData1:[
        {object:'aaa1',YY_CurrentNUM_CallWait:"1",YY_NUM_CallMissed:"10",YY_NUM_Calls:"12",YY_NUM_CallAnswer:"10",YY_NUM_CallAnswer_per:"8",YY_NUM_CallsAnswerIn20s_per:"7"},
        {object:'aaa2',YY_CurrentNUM_CallWait:"2",YY_NUM_CallMissed:"10",YY_NUM_Calls:"12",YY_NUM_CallAnswer:"10",YY_NUM_CallAnswer_per:"8",YY_NUM_CallsAnswerIn20s_per:"7"},
        {object:'aaa3',YY_CurrentNUM_CallWait:"3",YY_NUM_CallMissed:"10",YY_NUM_Calls:"12",YY_NUM_CallAnswer:"10",YY_NUM_CallAnswer_per:"8",YY_NUM_CallsAnswerIn20s_per:"7"},
        {object:'aaa4',YY_CurrentNUM_CallWait:"4",YY_NUM_CallMissed:"10",YY_NUM_Calls:"12",YY_NUM_CallAnswer:"10",YY_NUM_CallAnswer_per:"8",YY_NUM_CallsAnswerIn20s_per:"7"},
        {object:'aaa5',YY_CurrentNUM_CallWait:"5",YY_NUM_CallMissed:"10",YY_NUM_Calls:"12",YY_NUM_CallAnswer:"10",YY_NUM_CallAnswer_per:"8",YY_NUM_CallsAnswerIn20s_per:"7"},
        {object:'aaa6',YY_CurrentNUM_CallWait:"6",YY_NUM_CallMissed:"10",YY_NUM_Calls:"12",YY_NUM_CallAnswer:"10",YY_NUM_CallAnswer_per:"8",YY_NUM_CallsAnswerIn20s_per:"7"},
        {object:'aaa7',YY_CurrentNUM_CallWait:"7",YY_NUM_CallMissed:"10",YY_NUM_Calls:"12",YY_NUM_CallAnswer:"10",YY_NUM_CallAnswer_per:"8",YY_NUM_CallsAnswerIn20s_per:"7"},
        {object:'aaa8',YY_CurrentNUM_CallWait:"8",YY_NUM_CallMissed:"10",YY_NUM_Calls:"12",YY_NUM_CallAnswer:"10",YY_NUM_CallAnswer_per:"8",YY_NUM_CallsAnswerIn20s_per:"7"},
        {object:'aaa9',YY_CurrentNUM_CallWait:"9",YY_NUM_CallMissed:"10",YY_NUM_Calls:"12",YY_NUM_CallAnswer:"10",YY_NUM_CallAnswer_per:"8",YY_NUM_CallsAnswerIn20s_per:"7"},
        {object:'aaa0',YY_CurrentNUM_CallWait:"1",YY_NUM_CallMissed:"10",YY_NUM_Calls:"12",YY_NUM_CallAnswer:"10",YY_NUM_CallAnswer_per:"8",YY_NUM_CallsAnswerIn20s_per:"7"},
        {object:'aaa`',YY_CurrentNUM_CallWait:"2",YY_NUM_CallMissed:"10",YY_NUM_Calls:"12",YY_NUM_CallAnswer:"10",YY_NUM_CallAnswer_per:"8",YY_NUM_CallsAnswerIn20s_per:"7"},



        // <el-table-column prop="object" label="对象"></el-table-column>
        // <el-table-column prop="YY_CurrentNUM_CallWait" label="当期排队数"></el-table-column>
        // <el-table-column prop="YY_NUM_CallMissed" label="呼损量"></el-table-column>
        // <el-table-column prop="YY_NUM_Calls" label="人工请求量"></el-table-column>
        // <el-table-column prop="YY_NUM_CallAnswer" label="人工接通量" ></el-table-column>
        // <el-table-column prop="YY_NUM_CallAnswer_per" label="人工接通率"></el-table-column>
        // <el-table-column prop="YY_NUM_CallsAnswerIn20s_per" label="20S服务水平" ></el-table-column>
      ],
      totalRcrdNum:0,
       timeIntervalList:  [
        { name: "10分钟", value: "10" },
        { name: "30分钟", value: "30" },
        { name: "60分钟", value: "60" },
       
      ],
      form:{
        timeInterval:"",
        startTime:'',
        endTime:'',
      },
     
      tableData:[
        {object:'主管-李青青-呼入',ranking:'2',percapacity:'100(5/5)',aht:'165(1/5)',errorrate:'3.0%(1/5)',npsrecommend:'94.2%(1/5)',satisfaction:'88.2%(3/5)',punctuality:'82.3%(5/5)'},
        {object:'主管-陈明晓-呼入',ranking:'3',percapacity:'109(2/5)',aht:'187(4/5)',errorrate:'6.9%(4/5)',npsrecommend:'89.0%(3/5)',satisfaction:'91.0%(2/5)',punctuality:'84.0%(4/5)'},
        {object:'主管-丁香-呼入',ranking:'5',percapacity:'102(4/5)',aht:'168(3/5)',errorrate:'5.7%(3/5)',npsrecommend:'83.2%(4/5)',satisfaction:'86.4%(5/5)',punctuality:'85.2%(3/5)'},
        {object:'主管-王山-呼入',ranking:'4',percapacity:'115(1/5)',aht:'182(5/5)',errorrate:'8.0%(5/5)',npsrecommend:'79.2%(5/5)',satisfaction:'88.2%(3/5)',punctuality:'87.2%(2/5)'},
        {object:'主管-张帆-呼入',ranking:'1',percapacity:'107(3/5)',aht:'166(2/5)',errorrate:'5.4%(2/5)',npsrecommend:'93.1%(2/5)',satisfaction:'91.7%(1/5)',punctuality:'92.0%(1/5)'}
      ],
      dialogList: {
        siteTendency,
        agentList,
        siteRanking,
        siteEvaluating,
        siteTendencyMap,
        siteAgentMap
      },
      dialogOptions:{
        isShow: false
      },
      dialogOptionsA:{
        isShow: false
      },
      dialogOptionsB:{
        isShow: false
      },
      dialogOptionsC:{
        isShow: false
      },
      dialogOptionsD:{
        isShow: false
      },
      dialogOptionsE:{
        isShow: false
      },
      branchId:[],
      brnoMap: {},
      brnoList: [
            {superno: "00000",sdate: "20110101",lvl: "1",orgno: "80999",bName: "产险客服中心",cname: "产险客服中心",attr: "0"},
            {superno: "80999",sdate: "20110101",lvl: "2",orgno: "02001",bName: "池慕营团队",cname: "池慕营团队",attr: "1"},
            {superno: "02001",sdate: "20110101",lvl: "3",orgno: "02011",bName: "（LY）客户呼入吴川宜组",cname: "（LY）客户呼入吴川宜组",attr: "1"},
            {superno: "02001",sdate: "20110101",lvl: "3",orgno: "02021",bName: "（LY）客户呼入曾维花组",cname: "（LY）客户呼入曾维花组",attr: "1"},
            {superno: "02001",sdate: "20110101",lvl: "3",orgno: "02031",bName: "（LY）客户呼入王丹河组",cname: "（LY）客户呼入王丹河组",attr: "1"},
            
            {superno: "80999",sdate: "20110101",lvl: "2",orgno: "02002",bName: "章珊团队",cname: "章珊团队",attr: "1"},
            {superno: "02002",sdate: "20110101",lvl: "3",orgno: "02012",bName: "（LY）客户呼入刘奇组",cname: "（LY）客户呼入刘奇组",attr: "1"},
            {superno: "02002",sdate: "20110101",lvl: "3",orgno: "02022",bName: "（LY）客户呼入张善组",cname: "（LY）客户呼入张善组",attr: "1"},
            {superno: "02002",sdate: "20110101",lvl: "3",orgno: "02032",bName: "（LY）客户呼入李斯组",cname: "（LY）客户呼入李斯组",attr: "1"},
            {superno: "02002",sdate: "20110101",lvl: "3",orgno: "02042",bName: "（LY）客户呼入王武组",cname: "（LY）客户呼入王武组",attr: "1"},

            {superno: "80999",sdate: "20110101",lvl: "2",orgno: "02003",bName: "赵铭团队",cname: "赵铭团队",attr: "0"},
            {superno: "02003",sdate: "20110101",lvl: "3",orgno: "02041",bName: "（LY）客户呼入石敏齐组",cname: "（LY）客户呼入石敏齐组",attr: "1"},
            {superno: "02003",sdate: "20110101",lvl: "3",orgno: "02051",bName: "（LY）客户呼入贺易组",cname: "（LY）客户呼入贺易组",attr: "1"},
            {superno: "02003",sdate: "20110101",lvl: "3",orgno: "02061",bName: "（LY）客户呼入车亚忠组",cname: "（LY）客户呼入车亚忠组",attr: "1"},

            {superno: "80999",sdate: "20110101",lvl: "2",orgno: "02004",bName: "郑欣团队",cname: "郑欣团队",attr: "0"},
            {superno: "02004",sdate: "20110101",lvl: "3",orgno: "02052",bName: "（LY）客户呼入赵林组",cname: "（LY）客户呼入赵林组",attr: "1"},
            {superno: "02004",sdate: "20110101",lvl: "3",orgno: "02062",bName: "（LY）客户呼入赵铭组",cname: "（LY）客户呼入赵刚组",attr: "1"},
            {superno: "02004",sdate: "20110101",lvl: "3",orgno: "02072",bName: "（LY）客户呼入钱丽组",cname: "（LY）客户呼入钱丽组",attr: "1"},

            {superno: "00000",sdate: "20110101",lvl: "1",orgno: "80998",bName: "信用卡客服中心",cname: "信用卡客服中心",attr: "0"},
            {superno: "80998",sdate: "20110101",lvl: "2",orgno: "03001",bName: "关誉团队",cname: "关誉团队",attr: "1"},
            {superno: "03001",sdate: "20110101",lvl: "3",orgno: "03011",bName: "（LY）客户呼入吴川宜组",cname: "（LY）客户呼入于仲组",attr: "1"},
            {superno: "03001",sdate: "20110101",lvl: "3",orgno: "03021",bName: "（LY）客户呼入曾维花组",cname: "（LY）客户呼入元里夕组",attr: "1"},
            {superno: "03001",sdate: "20110101",lvl: "3",orgno: "03031",bName: "（LY）客户呼入王丹河组",cname: "（LY）客户呼入夏两赢组",attr: "1"},
            
            {superno: "80998",sdate: "20110101",lvl: "2",orgno: "03002",bName: "曾流白团队",cname: "曾流白团队",attr: "1"},
            {superno: "03002",sdate: "20110101",lvl: "3",orgno: "03012",bName: "（LY）客户呼入刘奇组",cname: "（LY）客户呼入孙峰组",attr: "1"},
            {superno: "03002",sdate: "20110101",lvl: "3",orgno: "03022",bName: "（LY）客户呼入张善组",cname: "（LY）客户呼入文秋组",attr: "1"},
            {superno: "03002",sdate: "20110101",lvl: "3",orgno: "03032",bName: "（LY）客户呼入王康组",cname: "（LY）客户呼入王康组",attr: "1"},
            {superno: "03002",sdate: "20110101",lvl: "3",orgno: "03042",bName: "（LY）客户呼入流川枫组",cname: "（LY）客户呼入流川枫组",attr: "1"},

            {superno: "80998",sdate: "20110101",lvl: "2",orgno: "03003",bName: "任怡旭团队",cname: "任怡旭团队",attr: "0"},
            {superno: "03003",sdate: "20110101",lvl: "3",orgno: "03041",bName: "（LY）客户呼入大龙猫组",cname: "（LY）客户呼入大龙猫组",attr: "1"},
            {superno: "03003",sdate: "20110101",lvl: "3",orgno: "03051",bName: "（LY）客户呼入大坤坤组",cname: "（LY）客户呼入大坤坤组",attr: "1"},
            {superno: "03003",sdate: "20110101",lvl: "3",orgno: "03061",bName: "（LY）客户呼入大蛤蟆组",cname: "（LY）客户呼入大蛤蟆组",attr: "1"},


            {superno: "00000",sdate: "20110101",lvl: "1",orgno: "80997",bName: "寿险客服中心",cname: "寿险客服中心",attr: "0"},
            {superno: "80997",sdate: "20110101",lvl: "2",orgno: "04001",bName: "刘备团队",cname: "刘备团队",attr: "1"},
            {superno: "04001",sdate: "20110101",lvl: "3",orgno: "04011",bName: "（LY）客户呼入关羽组",cname: "（LY）客户呼入关羽组",attr: "1"},
            {superno: "04001",sdate: "20110101",lvl: "3",orgno: "04021",bName: "（LY）客户呼入张飞组",cname: "（LY）客户呼入张飞组",attr: "1"},
            {superno: "04001",sdate: "20110101",lvl: "3",orgno: "04031",bName: "（LY）客户呼入赵云组",cname: "（LY）客户呼入赵云组",attr: "1"},
            
            {superno: "80997",sdate: "20110101",lvl: "2",orgno: "04002",bName: "曹操团队",cname: "曹操团队",attr: "1"},
            {superno: "04002",sdate: "20110101",lvl: "3",orgno: "04012",bName: "（LY）客户呼入典韦组",cname: "（LY）客户呼入典韦组",attr: "1"},
            {superno: "04002",sdate: "20110101",lvl: "3",orgno: "04022",bName: "（LY）客户呼入徐晃组",cname: "（LY）客户呼入徐晃组",attr: "1"},
            {superno: "04002",sdate: "20110101",lvl: "3",orgno: "04032",bName: "（LY）客户呼入张辽组",cname: "（LY）客户呼入张辽组",attr: "1"},
            {superno: "04002",sdate: "20110101",lvl: "3",orgno: "04042",bName: "（LY）客户呼入夏侯组",cname: "（LY）客户呼入夏侯组",attr: "1"},

            {superno: "80997",sdate: "20110101",lvl: "2",orgno: "04003",bName: "孙权团队",cname: "孙权团队",attr: "0"},
            {superno: "04003",sdate: "20110101",lvl: "3",orgno: "04041",bName: "（LY）客户呼入太史慈组",cname: "（LY）客户呼入太史慈组",attr: "1"},
            {superno: "04003",sdate: "20110101",lvl: "3",orgno: "04051",bName: "（LY）客户呼入甘宁组",cname: "（LY）客户呼入甘宁组",attr: "1"},
            {superno: "04003",sdate: "20110101",lvl: "3",orgno: "04061",bName: "（LY）客户呼入周瑜组",cname: "（LY）客户呼入周瑜组",attr: "1"},

            {superno: "00000",sdate: "20110101",lvl: "1",orgno: "80996",bName: "银行客服中心",cname: "银行客服中心",attr: "0"},
           ],
      brnoList1: [
          {superno: "0000",sdate: "20110101",lvl: "1",orgno: "8000",bName: "洛阳",cname: "洛阳",attr: "0"},
          {superno: "0000",sdate: "20110101",lvl: "1",orgno: "8001",bName: "上海",cname: "上海",attr: "0"},
          {superno: "0000",sdate: "20110101",lvl: "1",orgno: "8002",bName: "北京",cname: "北京",attr: "0"},
          {superno: "0000",sdate: "20110101",lvl: "1",orgno: "8003",bName: "重庆",cname: "重庆",attr: "0"},
          {superno: "0000",sdate: "20110101",lvl: "1",orgno: "8004",bName: "西安",cname: "西安",attr: "0"},
          {superno: "0000",sdate: "20110101",lvl: "1",orgno: "8005",bName: "广州",cname: "广州",attr: "0"},
      ],
      brnoList2: [
        {superno: "0000",sdate: "20110101",lvl: "1",orgno: "8000",bName: "客户线呼入",cname: "客户线呼入",attr: "0"},
      ]

    }
  },
   computed: {},
   created: function(){
  
    this.query();
    this.queryDetail();
    this.comQuery();
  },
    watch: {
  },
  mounted() {
    this.brnoList = toolBox.formatTreeData(
          this.brnoList,
          "orgno",
          "superno"
    );
    this.radarEmpty = (this.radarData.rows.length==0);
    this.ringEmpty = (this.ringData1.rows.length==0);
  },
  watch: {
  },
  methods: {
    comQuery(){
      //模板配置查询
      let resBody = new comQuery();
      resBody.data.TEAMTYPE = "1";
      request1(resBody)
        .then(response => {
          if (response.SYS_HEAD.ReturnCode === "000000") {
            this.companyList = response.RSP_BODY.RspStruct || [];
          } else {
            this.$message({
              type: "error",
              message: response.SYS_HEAD.ReturnMessage
            });
            this.companyList=[];
          }
          this.loading = false;
        })
        .catch(error => {
          this.loading = false;
        })
    
    },
    queryTeam(){
      this.form1.group = "";
      let resBody = new comQuery();
      resBody.data.TEAMID = '';
      resBody.data.TEAMNAME = '';
      resBody.data.TEAMLEVEL= '';
      resBody.data.TEAMTYPE = '0';
      resBody.data.HTEAMID = this.form1.company;
      resBody.data.pageflag = 4;
      resBody.data.pagerownum = 999999;
      resBody.data.currpage = this.currentPage;
      request1(resBody)
        .then(response => {
          if (response.SYS_HEAD.ReturnCode === "000000") {
            this.teamList = response.RSP_BODY.RspStruct || [];
          } else {
            this.$message({
              type: "error",
              message: response.SYS_HEAD.ReturnMessage
            });
            this.teamList=[];
          }
        })
        .catch(error => {
        })
    },
    queryDetail(){
      this.loading = true;
      let resBody = new queryQueDetail();
      // resBody.data.PAGEFLAG = 4;
      // resBody.data.CURRPAGE = this.currentPage;
      // resBody.data.PAGEROWNUM = this.pageSize;

      request1(resBody)
      .then(response => {
        if(response.SYS_HEAD.ReturnCode === "000000"){
          this.tableData1 = response.RSP_BODY.QueueList || [];
          this.totalRcrdNum = response.RSP_BODY.RecordNum;
        } else {
          this.$message({
            type: "error",
            message: response.SYS_HEAD.ReturnMessage
          });
          // this.tableData1 = [];
          this.totalRcrdNum = 0;
        }
        this.loading = false;
      })
      .catch(error => {
        this.loading = false;
      })
    },
    showAgentMap(row, column, cell, event){
      console.log("点击了话量趋势对比图，应该要出现坐席地图")
      this.dialogOptionsE.isShow = true;
      this.dialogOptionsE.title = "坐席地图";
    },
    showTendencyMap(row, column, cell, event){
      this.dialogOptionsD.isShow = true;
      this.dialogOptionsD.title = "现场趋势图";
    },
    detailShow(row, column, cell, event){
      //debugger
      this.dialogOptions.isShow = true;
      this.dialogOptions.title = "现场趋势";
      // this.dialogOptions.ODEDVSNLIST = this.ODEDVSNLIST;
    },
    agentShow(row, column, cell, event){
      this.dialogOptionsA.isShow = true;
      this.dialogOptionsA.title = "坐席列表";
    },
    rankShow(row, column, cell, event){
      console.log("点击了详情");
      this.dialogOptionsB.dialogOptions = this.dialogOptions;
      this.dialogOptionsB.isShow = true;
      this.dialogOptionsB.title = "现场排名";
    },
    evaluatingShow(row, column, cell, event){
      this.dialogOptionsC.isShow = true;
      this.dialogOptionsC.title = "雷达图指标配置";
    },
    hoverOne(){
      this.showOne = true;
      this.showTwo = false;
      this.showThree = false;
      this.showFour = false;
      this.showFive = false;
    },
    hoverTwo(){
      this.showOne = false;
      this.showTwo = true;
      this.showThree = false;
      this.showFour = false;
      this.showFive = false;
    },
    hoverThree(){
      this.showOne = false;
      this.showTwo = false;
      this.showThree = true;
      this.showFour = false;
      this.showFive = false;
    },
    hoverFour(){
      this.showOne = false;
      this.showTwo = false;
      this.showThree = false;
      this.showFour = true;
      this.showFive = false;
    },
    hoverFive(){
      this.showOne = false;
      this.showTwo = false;
      this.showThree = false;
      this.showFour = false;
      this.showFive = true;
    },

    getStartTime(value){
      // console.log(value);
      this.form.startTime=value;
      // console.log(this.form.startTime);
    },
    
    getEndtime(value){
      //  console.log(value);
       this.form.endTime=value;
      // console.log(this.form.endTime);

    },
      // 重置查询条件
    clearForm(item) {
      console.log(item);
      // 重置表格
      this.$refs["" + item].resetFields();
      // 重置视图层的开始时间和结束时间数据
      this.startTime="";
      this.endTime="";
  
   
    },

    async query(){
    //  console.log(this.form.timeInterval) 
     let self=this;
      console.log(this.form) ;
        let resBody = new query();
        resBody.data.type="queue";
        resBody.data.monikey="电话";
        resBody.data.timeInterval=this.form.timeInterval?this.form.timeInterval:"10";
        resBody.data.startTime=this.form.startTime?this.form.startTime:"08:00";
       resBody.data.endTime=this.form.endTime?this.form.endTime:"12:00";
         console.log("趋势图发送的resBody.data ,",resBody.data);
      request1(resBody)
        .then(response => {
          console.log("趋势图查询的response，",response);
         // 每次赋值前都要清除histogramData1.rows
           self.histogramData1.rows=[];
          if (response.SYS_HEAD.ReturnCode === "000000") {
           var resultData  =response.RSP_BODY.struct || {};
           response.RSP_BODY.struct.forEach( function(item,index,value){
            //  item是没条数据，index是索引，value是被遍历的者；
            // console.log("item",item,index,index,value,value);
               self.histogramData1.rows.push(item);
           })

        
          } else {
            this.$message({
              type: "error",
              message: response.SYS_HEAD.ReturnMessage
            });
            this.tableData=[];
          }
          this.loading = false;
        })
        .catch(error => {
          this.loading = false;
        });
        
    },
    // 电话六维测评 查询
    queryCallsix(){
      console.log("点击了六维查询");
      let resBody = new queryCallsix();
      // console.log(reaBody);
        resBody.data.type="queue";
        resBody.data.monikey="电话";
        resBody.data.eleArr=['其他业务当前排队数','个人业务当前排队数','对公业务当前排队数','信用卡业务当前排队数','电子银行业务当前排队数','VIP业务当前排队数',];
       console.log("电话六维测评发送的resBody.data ,",resBody.data);
      request1(resBody)
        .then(response => {
          console.log("电话六维测评查询的response，",response);
          if (response.SYS_HEAD.ReturnCode === "000000") {    
           var resultData  =response.RSP_BODY.struct || {};
          //  response.RSP_BODY.struct.map( function(item,index,value){
           
    

          //  })

        
          } else {
            this.$message({
              type: "error",
              message: response.SYS_HEAD.ReturnMessage
            });
            this.tableData=[];
          }
          this.loading = false;
        })
        .catch(error => {
          this.loading = false;
        });



    },
    queryCallsix1(){
      console.log("点击了六维查询");
      let resBody = new queryCallsix();
      // console.log(reaBody);
        resBody.data.type="agent";
        resBody.data.monikey="视频";
        resBody.data.eleArr=['其他业务当前排队数','个人业务当前排队数','对公业务当前排队数','信用卡业务当前排队数','电子银行业务当前排队数','VIP业务当前排队数',];
        resBody.data.company=this.form1.company;
        resBody.data.group=this.form1.group;
        resBody.data.agentid="";

       console.log("电话六维测评发送的resBody.data ,",resBody.data);
      request1(resBody)
        .then(response => {
          console.log("电话六维测评查询的response，",response);
          if (response.SYS_HEAD.ReturnCode === "000000") {    
           var resultData  =response.RSP_BODY.struct || {};
          //  response.RSP_BODY.struct.map( function(item,index,value){
           
    

          //  })

        
          } else {
            this.$message({
              type: "error",
              message: response.SYS_HEAD.ReturnMessage
            });
            this.tableData=[];
          }
          this.loading = false;
        })
        .catch(error => {
          this.loading = false;
        });



    },
  }
}

</script>

<style rel="stylesheet/scss" lang="scss" scoped>
.myHexagon{
  width: 100%;
  height: 400px;
  margin: 0px auto;
}
.myDoughnut{
  width: 100%;
  height: 400px;
  margin: 0px auto;
}
.myDoughnut2{
  width: 100%;
  height: 150px;
  margin: 0px auto;
}
.myDoughnut3{
  width: 50%;
  height: 220px;
  margin: 0px auto;
  float: left;

}
.myChart {
  width: 100%;
  height: 200px;
  margin: 0px auto;
}
.mainChart {
  width: 100%;
  height: 420px;
  margin: 0px auto;
}
.subChart {
  width: 100%;
  height: 320px;
  margin: 0px auto;
}
.el-table .cell{
  white-space:pre-line;
}
.right-col {
    height: 100%;
    background: #ffffff;
    margin-left:20px;
    margin-top: 10px;
    // margin-bottom: 20px;
  }
  .left-col {
    height: 100%;
    background: #ffffff;
    margin-top: 10px;

  }
.othermain{
  margin-bottom: 5px;
  height: 100%;
  width:100%;
  float:left;
  .left-col {
    height: 525px;
    // width:608.66px;
    background: #ffffff;
  }
  .right-col {
    height: 525px;
    // width:664px;
    background: #ffffff;
    margin-left:20px;
  }
}
.main {
   margin-bottom: 5px;
  height: 100%;
  background: #f0f2f5;
  .total-col {
    width:97.4%;
    // height: 100%;
    background: #ffffff;
  }
  .left-col {
    height: 100%;
    background: #ffffff;
  }
  .right-col {
    height: 100%;
    background: #ffffff;
    margin-left:20px;
  }
  .el-card{
    height: 100%;
  }
  .linstyel {
    padding-top: 30px;
    height: 100%;
}
   .main1 {
  height: 40%;
}
  .main2 {
 height: 40%;
}
.class1 {
   margin-left: 20px;
   display: inline-block;
   width: 10px;
   height: 10px;
  //  border: 1px solid #2ca7e9;
   background-color:  #2ca7e9;
}
.class2 {
   margin-left: 20px;
   display: inline-block;
   width: 10px;
   height: 10px;
   background-color:  #19d4ae;
  //  border: 1px solid red;
}
}

.dashboard-editor-container {
  height: 100%;
  padding: 32px;
  background-color: rgb(240, 242, 245);
  .chart-wrapper {
    background: #fff;
    padding: 16px 16px 0;
    margin-bottom: 32px;
  }
   .chart-wrapper1 {
    background: #f5f5f5;
    padding: 16px 16px 0;
    margin-bottom: 2px;
    color: #2ca7e9;
  }
  .chart-wrapper2 {
     background: #fff;
    padding: 16px 16px 0;
    margin-bottom: 32px;
   
    height: 100%;
   float: left;
  }
  .a {
    float: right;
   
  }
  .chart-container{
  position: relative;
  width: 100%;
  height: calc(100vh - 84px);
}
}


.seatAnnularTwoLegend li{
	margin-bottom:20px;
	cursor:pointer;
	transition:all 0.4s ease 0s
}
.seatAnnularTwoLegend li{
	width:40%;
	display: flex;
}
.seatAnnularTwoLegend .legendOne{
	border-bottom:1px solid #ed6856;
}
.seatAnnularTwoLegend .legendTwo{
	border-bottom:1px solid #4daf5d;
}
.seatAnnularTwoLegend .legendThree{
	border-bottom:1px solid #ff921d;
}
.seatAnnularTwoLegend .legendFour{
	border-bottom:1px solid #e1b737;
}
.seatAnnularTwoLegend .legendFive{
	border-bottom:1px solid #2ca7e9;
}
.seatAnnularTwoLegend li:hover{
	width:50%;
	border-width:2px;
}
.seatAnnularTwoLegend .percentage{
	width:45px;
	color:#FFF;
	border-radius:5px 5px 0px 0px;
	font-size:12px;
	display:inline-block;
	text-align:center;
	padding-top: 2px;
}
.seatAnnularTwoLegend .legendOne .percentage{
	background:#ed6856;
}
.seatAnnularTwoLegend .legendTwo .percentage{
	background:#4daf5d;
}
.seatAnnularTwoLegend .legendThree .percentage{
	background:#ff921d;
}
.seatAnnularTwoLegend .legendFour .percentage{
	background:#e1b737;
}
.seatAnnularTwoLegend .legendFive .percentage{
	background:#2ca7e9;
}
.seatAnnularTwoLegend .legendOne .numValue{
	color:#ed6856;
	margin:0 15px 0px 10px;
}
.seatAnnularTwoLegend .legendTwo .numValue{
	color:#4daf5d;
	margin:0 15px 0px 10px;
}
.seatAnnularTwoLegend .legendThree .numValue{
	color:#ff921d;
	margin:0 15px 0px 10px;
}
.seatAnnularTwoLegend .legendFour .numValue{
	color:#e1b737;
	margin:0 15px 0px 10px;
}
.seatAnnularTwoLegend .legendFive .numValue{
	color:#2ca7e9;
	margin:0 15px 0px 10px;
}
.seatAnnularTwoLegend{
	padding-top:0px;
  height:220px;
  margin-bottom: 0px;
  margin-top: 0px;
}

.legendListDetail{
	width:100%;
	padding-top: 0px;
}
.legendListDetail .title{
	margin-bottom: 5px;
  margin-top: 0px;
}
.legendListDetail .legendOneList .title{
	color: #ed6856;
}
.legendListDetail .legendTwoList .title{
	color: #4daf5d;
}
.legendListDetail .legendThreeList .title{
	color: #ff921d;
}
.legendListDetail .legendFourList .title{
	color: #e1b737;
}
.legendListDetail .legendFiveList .title{
	color: #2ca7e9;
}
.legendListDetail .icon{
	width: 10px;
    height: 10px;
    border-radius: 2px;
    display: inline-block;
    margin-right: 5px;
}
.legendListDetail ul li{
	margin-bottom:20px;
}
.legendListDetail .legendOneList .icon{
	background-color:#ed6856;
}
.legendListDetail .legendTwoList .icon{
	background-color:#4daf5d;
}
.legendListDetail .legendThreeList .icon{
	background-color:#ff921d;
}
.legendListDetail .legendFourList .icon{
	background-color:#e1b737;
}
.legendListDetail .legendFiveList .icon{
	background-color:#2ca7e9;
}
.legendListDetail .legendName{
	display:inline-block;
	width:63%;
}
</style>